<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
            div{
                width: 100px;
                height: 120px;
                float: left;
                
            }
            div span{
                display: inline-block;
                width: 100px;
                height: 30px;
                text-align: center;
                background-color: gray;
                color: white;
                line-height: 2;
            }
            div span:hover{
                cursor: pointer;
                color: orange;
            }
            div ul{
                display: none;
                list-style: none;
                width: 80px;
                margin: 0;
                padding: 0;
            }
            div ul li{
                margin-left: 10px;
                width: 80px;
                height: 30px;
                text-align: center;
                line-height: 2;
                border: 1px solid gray;
                border-width: 0 1px 1px 1px;
            }
            div ul li:hover{
                cursor: pointer;

                text-decoration: underline;
            }
            p{
                position: absolute;
                left: 100px;
                top: 150px;
            }
        </style>
    </head>
    <body>
        <div class="d">
            <span>公司简介</span>
            <ul>
                <li>公司简介</li>
                <li>公司简介</li>
                <li>公司简介</li>
            </ul>
        </div>
        <div class="d">
            <span>产品介绍</span>
            <ul>
                <li>产品介绍</li>
                <li>产品介绍</li>
                <li>产品介绍</li>
            </ul>
        </div>
        <div class="d">
            <span>联系我们</span>
            <ul>
                <li>联系我们</li>
                <li>联系我们</li>
                <li>联系我们</li>
            </ul>
        </div>
        <div class="d">
            <span>人才招聘</span>
            <ul>
                <li>人才招聘</li>
                <li>人才招聘</li>
                <li>人才招聘</li>
            </ul>
        </div>
    </body>
</html>

<script>
    // span绑定鼠标事件
    $('span').mousemove(function(){
        // 让span 的兄弟元素也就是ul显示
        $(this).siblings().css('display','block');
        // 让span的父元素的兄弟元素的ul子标签隐藏
        $(this).parent().siblings().children('ul').css('display','none');
    })
    // 给div绑定鼠标事件
    $('.d').mouseleave(function(){
        // 移出div内部 让ul隐藏
        $(this).children('ul').css('display','none');
    })



</script>